<template>
  <div>
    <t-dialog
      header="上传语音讲解"
      :visible="props.visible"
      :confirm-on-enter="true"
      :on-close="closetable"
      :cancelBtn="null"
      :confirmBtn="null"
      :loading="loading"
    >
      <template #body>
        <div class="dialog-box">
          <t-form labelAlign="right" ref="modelForm" labelWidth="0px" :data="parmas" :rules="rules" @submit="onSubmit">
            <t-form-item label="展品名称" name="name">
              <div class="hw-from-content">
                <div class="from-title-box">
                  <span class="from-title-box-name">语音标题</span>
                  <span class="from-title-box-tip">*</span>
                </div>
                <t-input
                  show-limit-number
                  :maxlength="20"
                  v-model="parmas.name"
                  placeholder="请输入语音标题"
                  style="width: 344px"
                ></t-input>
              </div>
            </t-form-item>
            <t-form-item label="展品名称">
              <div class="hw-from-content">
                <div class="from-title-box">
                  <span class="from-title-box-name">语音讲解词</span>
                  <span class="from-title-box-tip"></span>
                </div>
                <t-textarea
                  v-model="parmas.description"
                  placeholder="请输入内容"
                  name="description"
                  :maxlength="500"
                  :autosize="{ minRows: 3, maxRows: 5 }"
                />
                <!-- <t-input v-model="parmas.name" placeholder="请输入展品名称" style="width: 584px"></t-input> -->
              </div>
            </t-form-item>
            <t-form-item label="语音讲解" name="url">
              <div class="hw-from-content">
                <div class="from-title-box">
                  <span class="from-title-box-name">语音文件</span>
                </div>
                <div class="audio-list-box-upload-parent" v-if="!parmas.url">
                  <t-loading :loading="Mp3Show" size="large">
                    <t-upload
                      ref="uploadRefaudio"
                      v-model="filelist1"
                      accept=".mp3"
                      :before-upload="beforeUploadAudio"
                      :upload-all-files-in-one-request="uploadAllFilesInOneRequest"
                    >
                      <div class="audio-list-box-upload">
                        <i class="doorIcon"> &#xe652; </i>
                        <span> 添加音频 </span>
                      </div>
                    </t-upload>
                  </t-loading>
                </div>
                <HWplayer :audio="parmas" v-else @delAudioUrl="parmas.url = ''" />
                <span class="audio-tip">支持10M以内MP3格式音频，最多1条</span>
              </div>
            </t-form-item>
          </t-form>
        </div>
      </template>
      <template #footer>
        <t-button @click="closetable" theme="default" variant="outline">取消</t-button>
        <t-button @click="onSubmit">确定</t-button>
      </template>
    </t-dialog>
  </div>
</template>

<script setup lang="ts">
// @ts-nocheck
import { upLoadFn } from '@/utils/request/upload';
import HWplayer from '@/components/audio/exbitionAudio.vue';
import { url, heards, urls } from '@/utils/request/upload';
import { ref, reactive, defineExpose, nextTick, onMounted } from 'vue';
import { MessagePlugin } from 'tdesign-vue-next';
import { delExbitionTag, bindTag, tagList, tagSave, tagDetail } from '@/api/tag/tag';
import { useRouter, useRoute } from 'vue-router';
import { useProjectStore, useUserStore } from '@/store';

const props = defineProps({
  visible: {
    type: Boolean,
  },
  info: {
    type: Object,
  },
});
const emit = defineEmits(['close', 'sbumitAudio']);
const filelist1 = ref([]);
const uploadAllFilesInOneRequest = ref(false);
const store = useProjectStore();
const route = useRoute();
const modelForm = ref(null);
const Mp3Show = ref(false);
const loading = ref(false);
const parmas = reactive({
  type: 3,
  url: '',
  description: '',
  name: '',
});

const closetable = () => {
  //   visible1.value = false;
  emit('close');
};
const rules = {
  name: [{ required: true, message: '语音名称必填', type: 'error' }],
  url: [{ required: true, message: '请添加音频', type: 'error' }],
};
// parmas = props.info;
const onSubmit = () => {
  console.log(parmas);

  if (!parmas.name) {
    MessagePlugin.error('请输入语音名称');
    return;
  } else if (!parmas.url) {
    MessagePlugin.error('请上传语音');
    return;
  } else {
    emit('sbumitAudio', parmas);
  }
};
const beforeUploadAudio = (file: any) => {
  // console.log(file);
  if (file.type.indexOf('audio/') == -1) {
    MessagePlugin.error('文件类型错误');
    return;
  }
  if (file.size / 1000000 > 10) {
    MessagePlugin.error('上传大小超出10M限制');
    return;
  }
  Mp3Show.value = true;
  upLoadFn(file, 4).then((res) => {
    if (res) {
      parmas.url = res;
      parmas.name = parmas.name ? parmas.name : file.raw.name;
    } else {
      MessagePlugin.error('上传失败');
    }
    Mp3Show.value = false;
  });
};
nextTick(() => {
  console.log(props.info);
  parmas.name = props.info.name;
  parmas.url = props.info.url;
  parmas.description = props.info.description;
});
</script>

<style lang="less" scoped>
:deep(.t-dialog) {
  width: 584px;
}
.dialog-box {
  display: flex;
  width: 100%;
  :deep(.t-form) {
    width: 100%;
  }
  :deep(.t-form__item) {
    margin-bottom: 24px;
  }
}
.audio-list-box-upload-parent {
  width: 124px;
  height: 36px;
}
.audio-list-box-upload {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  width: 124px;
  height: 36px;
  border-radius: 4px;
  border: 1px solid #e62b17;
  .doorIcon {
    color: #e62b17;
    font-size: 16px;
  }
  span {
    font-size: 16px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #e62b17;
    line-height: 24px;
    margin-left: 8px;
  }
}
.audio-tip {
  display: flex;
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.38);
  line-height: 22px;
  margin-top: 8px;
  margin-bottom: 20px;
}
.list-tip-box {
  display: flex;
  align-items: flex-end;
  width: 184px;
  height: 184px;
  margin-left: 8px;
}
:deep(.t-dialog__footer) {
  display: flex !important;
  justify-content: flex-end;
}
</style>
